<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员界面</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            display: flex;
            max-width: 800px;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;

            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px; /* 增加内边距 */
            border-radius: 15px; /* 增加边框圆角 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            margin: 20px; /* 增加外边距 */
        }

        .sidebar {
            width: 200px;
            padding: 20px;
            background-color: #333;
            color: #fff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar h2 {
            color: #4caf50;
            margin-bottom: 20px;
        }

        .sidebar button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #4caf50;
            color: white;
            font-size: 16px;
            transition: background-color 0.3s;
            display: block;
        }

        .sidebar button:hover {
            background-color: #45a049;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
            transition: margin-left 0.3s;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #4caf50;
            color: white;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-top: 30px;
        }

        .form-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #ddd;
            z-index: 9;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .form-container {
            max-width: 300px;
            margin: auto;
        }

        .form-container input {
            width: 100%;
            padding: 10px;
            margin: 5px 0 10px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .form-container button {
            background-color: #4caf50;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .close-btn {
            color: #4caf50;
            float: right;
            font-size: 20px;
            cursor: pointer;
        }

        .background {
            background-color: rgba(255, 255, 255, 0.8); /* 背景色透明度，可根据需要调整 */
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            margin: auto; /* 居中 */
            overflow: hidden; /* 防止内容溢出 */

            background-image: url('../static/img/daoqi.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat; /* 防止图片重复 */
            height: 100vh; /* 降低高度，使布局看起来更均衡 */
            width: 100%;
            display: flex;
            flex-direction: column; /* 竖直布局 */
            align-items: center;
            justify-content: center;
            border: 10px solid rgba(255, 255, 255, 0.5); /* 透明边框 */
        }
    </style>
    <script>

<!-- -------------------------------用户--------------------------------------------- -->
         function showUsers() {
            fetch('/show_users')
                .then(response => response.json())
                .then(data => {
                    // 更新页面内容，data 包含从后端获取的用户数据
                    displayData(data);
                })
                .catch(error => console.error('Error:', error));
        }

        function displayData(data) {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = `<h2>用户信息</h2>`+
            `<table>
            <tr>
                <td>用户编号</td>
                <td>用户姓名</td>
                <td>电话号码</td>
                <td>用户名</td>
                <td>删除用户</td>
                </tr>` +
            data.map(user=>{
                return `<tr><td>${user.Uid}</td><td>${user.Uname}</td><td>${user.Uphone}</td><td>${user.Uusername}</td>
                <td><button onclick="deleteUser(${user.Uid})">删除</button></td></tr>`
            }).join('')
            +`</table>`
        }
<!-- -------------------------------用户--------------------------------------------- -->
<!-- -------------------------------菜品--------------------------------------------- -->
        function showDishes() {
            fetch('/show_dishes')
                .then(response => response.json())
                .then(data => {
                    // 更新页面内容，data 包含从后端获取的菜品数据
                    displayDishes(data);
                })
                .catch(error => console.error('Error:', error));
        }

        function displayDishes(data) {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = `<h2>菜品信息</h2>`+
            `<table>
            <tr>
                <td>菜品编号</td>
                <td>菜品名称</td>
                <td>菜品价格</td>
                <td>菜品销量</td>
                <td>菜品库存</td>
                <td>删除菜品</td>
                </tr>` +
            data.map(dish=>{
                return `<tr><td>${dish.Did}</td><td>${dish.Dname}</td><td>${dish.Dprice}</td><td>${dish.Dsale}</td><td>${dish.Dinv}</td>
                <td><button onclick="deleteDish(${dish.Did})">删除</button></td></tr>`
            }).join('')
            +`</table>`
        }
<!-- -------------------------------菜品--------------------------------------------- -->
<!-- -------------------------------订单--------------------------------------------- -->
        function showOrders() {
            fetch('/show_orders')
                .then(response => response.json())
                .then(data => {
                    // 更新页面内容，data 包含从后端获取的订单数据
                    displayOrders(data);
                })
                .catch(error => console.error('Error:', error));
        }

        function displayOrders(data) {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = `<h2>您有待派送的订单</h2>`+
            `<table>
                <tr>
                <td>订单编号</td>
                <td>点单用户</td>
                <td>订单价格</td>
                <td>订单日期</td>
                <td>所点菜品名称</td>
                <td>确认状态</td>
                </tr>` +
            data.map(order=>{
                return `<tr><td>${order.Oid}</td><td>${order.Oowner}</td><td>${order.Oprice}</td><td>${order.Odate}</td><td>${order.Oname}</td>
                <td><button onclick="deleteOrder(${order.Oid})">已上菜</button></td></tr>`
            }).join('')
            +`</table>`
        }
<!-- -------------------------------订单--------------------------------------------- -->
    </script>
     <script>
         <!--登出操作-->
        function logout() {
            result = window.confirm("确认退出登录？");
            if (result == true){
                // 在这里执行页面跳转到 /
                window.location.href = '/';
            }
        }

        function openForm(formId) {
            document.getElementById(formId).style.display = 'block';
        }

        function closeForm(formId) {
            document.getElementById(formId).style.display = 'none';
        }

        function addUser() {
            const name = document.getElementById('name').value;
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const phone = document.getElementById('phone').value;

            const data = {
                name : name,
                username : username,
                password : password,
                phone : phone
            }

            fetch('/add_user',{
             method:"post",
             body: JSON.stringify(data),
                headers: {
                'Content-Type': 'application/json'
                }
             })
                .then(response => response.json()).
                then(res=>{console.log(res);
                if (res.status === 'error') {alert('该用户名已经注册过了！');}
                })
                .catch(error => console.error('Error:', error)
                );

            // 关闭表单
            closeForm('addUserForm');
            // 刷新显示用户信息
            showUsers();
        }

        function addDish() {
            const dishName = document.getElementById('dishName').value;
            const dishPrice = document.getElementById('dishPrice').value;
            const dishSale = document.getElementById('dishSale').value;
            const dishInv = document.getElementById('dishInv').value;

            const data = {
                name : dishName,
                price : dishPrice,
                sale : dishSale,
                inv : dishInv
            }

            fetch('/add_dish',{
             method:"post",
             body: JSON.stringify(data),
                headers: {
                'Content-Type': 'application/json'
                }
             })
                .then(response => response.json()).
                then(res=>{console.log(res)})
                .catch(error => console.error('Error:', error));

            // 关闭表单
            closeForm('addDishForm');
            // 刷新显示菜品信息
            showDishes();
        }

        function deleteUser(itemId) {
            // 刷新显示信息
            let result=confirm("确认删除")
            if (result === true) {
             fetch('/delete_users',{
             method:"post",
             body: JSON.stringify({id:itemId}),
                headers: {
                'Content-Type': 'application/json'
                }
             })
                .then(response => response.json()).
                then(res=>{console.log(res)})
                .catch(error => console.error('Error:', error));
             showUsers(); // 例如，如果是删除用户，就刷新显示用户信息
             } else {
            // 用户点击了取消按钮，不执行操作
             console.log("用户点击了取消按钮");
            }
        }

        function deleteDish(itemId) {
            // 刷新显示信息
            let result=confirm("确认删除")
            if (result === true) {
             fetch('/delete_dishes',{
             method:"post",
             body: JSON.stringify({id:itemId}),
                headers: {
                'Content-Type': 'application/json'
                }
             })
                .then(response => response.json()).
                then(res=>{console.log(res)})
                .catch(error => console.error('Error:', error));
             showDishes();
             } else {
            // 用户点击了取消按钮，不执行操作
             console.log("用户点击了取消按钮");
            }
        }

        function deleteOrder(itemId) {
            // 刷新显示信息
            let result=confirm("确认已派送？")
            if (result === true) {
             fetch('/delete_order',{
             method:"post",
             body: JSON.stringify({id:itemId}),
                headers: {
                'Content-Type': 'application/json'
                }
             })
                .then(response => response.json()).
                then(res=>{console.log(res)})
                .catch(error => console.error('Error:', error));
             showOrders();
             } else {
            // 用户点击了取消按钮，不执行操作
             console.log("用户点击了取消按钮");
            }
        }

         function ledger() {
         fetch('/ledger')
                .then(response => response.json())
                .then(data => {
                    // 更新页面内容，data 包含从后端获取的数据
                    displayLedger(data)
                })
                .catch(error => console.error('Error:', error));
        }

        function displayLedger(data) {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = `<h2>账本</h2>`+
            `<table>
            <tr>
                <td>用户名</td>
                <td>总消费额</td>
                </tr>` +
            data.map(data=>{
                return `<tr><td>${data.Oowner}</td><td>${data.TotalPrice}</td></tr>`
            }).join('')
            +`</table>`
        }

    </script>
</head>
<body>
<div class="background">

    <div class="container">
        <div class="sidebar">
            <h2>你好管理员{{username}}</h2>
                <button onclick="showUsers()">查看所有用户信息</button>
                <button onclick="showDishes()">查看所有菜品信息</button>
                <button onclick="showOrders()">查看订单</button>
                <button onclick="openForm('addUserForm')">添加用户</button>
                <button onclick="openForm('addDishForm')">添加菜品</button>
                <button onclick="ledger()">账本</button>
                <button onclick="logout()">退出登录</button>
        </div>

        <div class="content" id="content">
            <h1>欢迎使用点餐系统管理员界面</h1>
        </div>
    </div>

    <div class="form-popup" id="addUserForm">
        <div class="form-container">
            <span class="close-btn" onclick="closeForm('addUserForm')">&times;</span>
            <h2>添加用户</h2>
                <input type="text" placeholder="姓名" id="name">
                <input type="text" placeholder="用户名" id="username">
                <input type="password" placeholder="密码" id="password">
                <input type="text" placeholder="电话号码" id="phone">
                <button onclick="addUser()">添加</button>
        </div>
    </div>


    <div class="form-popup" id="addDishForm">
        <div class="form-container">
            <span class="close-btn" onclick="closeForm('addDishForm')">&times;</span>
            <h2>添加菜品</h2>
                <input type="text" placeholder="菜品名称" id="dishName">
                <input type="text" placeholder="价格" id="dishPrice">
                <input type="text" placeholder="销量" id="dishSale">
                <input type="text" placeholder="库存" id="dishInv">
                <button onclick="addDish()">添加</button>
        </div>
    </div>

</div>
</body>
</html>
